<template>
    <footer>
        <el-row type="flex" justify="center">
  <el-col :span="6"><div class="grid-content">
    <img :src="require('@/assets/footerimg.png')" class="img1" alt="图片不见啦">
    <div id="title">
        <h1>X大学信息技术中心</h1>
        <h4 style="margin-top:-20px;font-family:'Times New Roman', Times, serif">X University information technology center</h4>
        </div>
        <div id="info">
            这里是远景、简要介绍Lorem ipsum dolor sit amet,consectetur adipiscing elit
Aenean euismod bibendum laoreet.Proin gravida dolor sit amet lacus
accumsan et viverra justo commodo.Proin sodales pulvinar sic tempor.Sociis
natoque penatibus et magnis dis parturient montes,nascetur ridiculus mus.
Nam fermentum,nulla luctus pharetra vulputate,felis tellus mollis orci,sed
rhoncus pronin sapien nunc accuan eget.
            </div>
  </div></el-col>
  <el-col :span="6"><div class="grid-content">
    <el-col :span="12"><div class="grid-content">
        <ul class="ulcommon">
            <li class="lileft" style="font-size:18px;font-weight:bold">关于iStudy</li>
            <li class="lileft">关于我们</li>
            <li class="lileft">加入我们</li> 
            <li class="lileft">商务合作</li>
        </ul>
    </div></el-col>
    <el-col :span="12"><div class="grid-content">
        <ul class="ulcommon">
            <li class="liright" style="font-size:18px;font-weight:bold">联系我们</li>
            <li class="liright">电话</li>
            <li class="liright">+86 010-87654326</li> 
            <li class="liright">邮箱</li>
            <li class="liright">serivice@istudy.com</li>
        </ul>
    </div></el-col>
  </div></el-col>
  <el-col :span="6"><div class="grid-content" id="right">
    <h6>关注我们</h6>
    <div id="disleft">
        <p>微信</p>
        <img :src="require('@/assets/code.png')" alt="图片不见啦">
    </div>
    <div id="disright">
        <p>微博</p>
        <img :src="require('@/assets/code2.png')" alt="图片不见啦">
    </div>
    <p id="client">客户端下载</p>
  </div></el-col>
</el-row>
<el-row :gutter="20">
  <el-col :span="12" :offset="6"><div class="grid-content" style="font-size:10px;color:white;">Copyright © 2014-2019 www.xxx.edu.cn XICP备05074421号-1 X公网安备33010602010295 E-mail:xwmaster@xxx.edu.cn</div></el-col>
</el-row>
</footer>
</template>
<script>
export default {}
</script>
<style scoped>

footer{
    background-color:black;
    width:100%;
    height:400px;
}
.img1{
    margin-top:80px;
    float:left;
}
h1,h4,p,span{
    color:rgb(223, 223, 223);
    font-weight:400;
    font-family:sans-serif;
}
.purple{
    background-color:purple;
}
#title{
    float: right;
    margin-top:45px;
}
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  #info{
    color:rgb(190, 190, 190);
    font-size: 10px;
    font-family:sans-serif;
    text-align: left;
    text-indent:0px;
    float: left;
  }
.ulcommon{
    margin-top:60px;
    text-align:left;
}
.lileft{
    color:rgb(221, 221, 221);
    margin:40px;
    list-style:none;
}
.liright{
    color:rgb(218, 216, 216);
    margin:26px;
    list-style:none;
}
h6{
    text-indent:0px;
    margin-left: 30px;
    font-size:18px;
    font-weight:bold;
    color:rgb(214, 214, 214);
    margin-top:5px;
    text-align:left;
    margin-block-start: 1em;
    margin-block-end: 1em;
}
#right{
    margin-top:60px;
    height: 300px;
}
#disleft{
    text-align:left;
    float: left;
    margin-left:30px;
}
#disright{
    text-align:left;
    margin-left:50px;
    float:left;
}
#client{
    position:relative;
    left:-275px;
    bottom: -150px;
}
</style>